<template>
  <view class="luch-audio__warp">
    <view
      class="luch-audio__cover"
      :class="{ 'luch-audio--cover-bg': !poster }"
    >
      <image :src="poster" v-if="poster" class="luch-audio__cover-img"></image>
      <view
        class="luch-audio__play-btn"
        :class="{ 'luch-audio--btn-pause': videoIsPlay }"
        @click="handleBtnClick"
      ></view>
    </view>
    <view class="luch-audio__audio-con">
      <view class="luch-audio__audio-info">
        <text class="luch-audio__audio-title luch-audio--text-eill">{{
          name
        }}</text>
        <text class="luch-audio__audio-author luch-audio--text-eill">{{
          author
        }}</text>
      </view>
      <view class="luch-audio__audio-time">{{ audioTimeUpdate }}</view>
    </view>
  </view>
</template>

<script>
/**
 * luch-audio
 * @module luch-audio
 * @Author lu-ch
 * @Date 2022-07-14
 * @Email webwork.s@qq.com
 * @description 音频播放组件，使用了createInnerAudioContext
 */
/**
 * Props itemsProps
 * @prop {Boolean} play - 是否播放，双向绑定，绑定时需使用.sync 如果为true 则播放，为false 则暂停
 * ... 其他api同文档 （https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext）
 */
/**
 * 将秒转换为 分:秒
 * @param {Number} s - 秒数
 */
function sToHs(s) {
  //计算分钟
  //算法：将秒数除以60，然后下舍入，既得到分钟数
  let h
  h = Math.floor(s / 60)
  //计算秒
  //算法：取得秒%60的余数，既得到秒数
  s = s % 60
  //将变量转换为字符串
  h += ''
  s += ''
  //如果只有一位数，前面增加一个0
  h = h.length === 1 ? '0' + h : h
  s = s.length === 1 ? '0' + s : s
  return h + ':' + s
}
export default {
  name: 'ComAudio',
  props: {
    // 是否播放或暂停
    play: {
      type: Boolean,
      default: false,
    },
    // 播放src
    src: {
      type: String,
    },
    poster: {
      type: String,
      default: '',
    },
    name: {
      type: String,
      default: '未知音频',
    },
    author: {
      type: String,
      default: '未知作者',
    },
    autoplay: {
      type: Boolean,
      // default: false
    },
    loop: {
      type: Boolean,
      // default: false
    },
    // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-JD || MP-KUAISHOU
    obeyMuteSwitch: {
      type: Boolean,
      // default: true
    },
    // #endif
    // 初始化回调
    initAudio: {
      type: Function,
    },
    // 自定义组件标识
    index: {
      type: [String, Number],
    },
  },
  data() {
    return {
      audioTimeUpdate: '00:00',
      videoIsPlay: false,
      // innerAudioContext: ''
    }
  },
  watch: {
    play(n) {
      // this.videoIsPlay = play
      if (n) {
        !this.videoIsPlay && this.audioPlay()
      } else {
        this.videoIsPlay && this.audioPause()
      }
    },
    src() {
      this.audioDestroy()
      this.contextInit()
    },
  },
  created() {
    this.contextInit()
  },
  beforeDestroy() {
    this.audioDestroy()
  },
  methods: {
    audioPlay() {
      this.innerAudioContext && this.innerAudioContext.play()
    },
    audioPause() {
      this.innerAudioContext && this.innerAudioContext.pause()
    },
    audioOnPlay() {
      this.videoIsPlay = true
      this.$emit('update:play', true)
    },
    audioOnPause() {
      this.videoIsPlay = false
      this.$emit('update:play', false)
    },
    audioDestroy() {
      this.innerAudioContext &&
        this.innerAudioContext.destroy &&
        this.innerAudioContext.destroy()
      this.audioPropInit()
    },
    audioControls() {
      if (this.videoIsPlay) {
        this.audioPause()
      } else {
        this.audioPlay()
      }
    },
    handleBtnClick() {
      // this.videoIsPlay = !this.videoIsPlay
      this.audioControls()
      this.$emit('update:play', this.videoIsPlay)
    },
    contextInit() {
      let that = this
      that.$emit('update:play', false)
      if (!that.src) {
        if (process.env.NODE_ENV !== 'production') {
          console.warn(`[luch-audio warn]: 'src' 为空`)
        }
        return
      }
      const innerAudioContext = uni.createInnerAudioContext()
      innerAudioContext.autoplay = that.autoplay
      innerAudioContext.loop = that.loop
      // #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-JD || MP-KUAISHOU
      if (typeof that.obeyMuteSwitch === 'boolean') {
        innerAudioContext.obeyMuteSwitch = that.obeyMuteSwitch
      }
      // #endif
      innerAudioContext.onPlay((...arg) => {
        that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime))
        that.audioOnPlay()
        that.$emit('onPlay', ...arg)
      })
      innerAudioContext.onPause((...arg) => {
        that.audioOnPause()
        that.$emit('onPause', ...arg)
      })
      innerAudioContext.onEnded((...arg) => {
        that.audioOnPause()
        that.$emit('onEnded', ...arg)
      })
      innerAudioContext.onTimeUpdate((...arg) => {
        that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime))
        that.$emit('onTimeUpdate', ...arg)
      })
      innerAudioContext.onError((...arg) => {
        that.$emit('onError', ...arg)
      })
      innerAudioContext.src = that.src
      if (that.initAudio) {
        that.initAudio(innerAudioContext, { src: that.src, index: that.index })
      }
      this.innerAudioContext = innerAudioContext
    },
    audioPropInit() {
      this.audioTimeUpdate = '00:00'
      this.videoIsPlay = false
    },
  },
}
</script>
<style lang="scss" scoped>
.luch-audio--text-eill {
  /*超出省略号*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.luch-audio__warp {
  display: flex;
  overflow: hidden;
  height: 67px;
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}
.luch-audio__cover {
  position: relative;
  flex-shrink: 0;
  width: 65px;
  height: 100%;
  &.luch-audio--cover-bg {
    background-color: #e6e6e6;
  }
  .luch-audio__cover-img {
    width: 100%;
    height: 100%;
  }
  .luch-audio__play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateX(-50%) translateY(-50%);
    border-radius: 50%;
    background-size: 100% 100%;
    background-image: url('');
    &.luch-audio--btn-pause {
      background-image: url('');
    }
  }
}
.luch-audio__audio-con {
  position: relative;
  flex: 1;
  display: flex;
  width: 0;
  padding: 0 15px;
  align-items: center;
  background-color: #fcfcfc;
  .luch-audio__audio-info {
    width: 100%;
  }
  .luch-audio__audio-title {
    display: block;
    padding-bottom: 7px;
    padding-right: 25px;
    font-size: 14px;
    color: #353535;
  }
  .luch-audio__audio-author {
    display: block;
    font-size: 12px;
    color: #888888;
  }
  .luch-audio__audio-time {
    position: absolute;
    right: 15px;
    top: 6px;
    font-size: 13px;
    color: #9d9d9d;
  }
}
</style>
